<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div {width: 50px; height: 100px; background-color: red;margin-top:20px;border: 1px solid #000;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var aDiv = document.getElementsByTagName('div');

		aDiv[0].onmouseover = function (){
			doMove(this,'width',500);
		}

		aDiv[1].onmouseover = function (){
			doMove(this,'height',200);
		}

		aDiv[2].onmouseover = function (){
			doMove(this,'fontSize',100);
		}		

		aDiv[3].onmouseover = function (){
			doMove(this,'opacity',100);
		}		
	}

	function doMove(obj, attr, target){
	clearInterval(obj.timer);

	obj.timer = setInterval(function (){
		var icur = 0;

		if ( attr == 'opacity' ) {
			icur = parseInt( parseFloat( getStyle(obj, attr) ) * 100 );
		}else{
			icur = parseInt( getStyle(obj, attr) );
		}
		
		var speed = (target - icur)/10;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

		if ( icur == target) {
			clearInterval(obj.timer)
		}else{
			if (attr == 'opacity') {
				obj.style[attr] = (icur + speed)/100;
				obj.style[attr] = 'filter:alpha(opacity:'+ (icur + speed) +')';
			} else{
				obj.style[attr] = icur + speed + 'px';
			};
		}
	},30)
}

function getStyle(obj, attr){
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div>adweds</div>
	<div style="opacity:0.2"></div>
</body>
</html>